import { goToPage } from '../../../config/pages';
// pages/bulk-materials-home/bulk-materials-home.ts

interface PageData {
  currentCategory: string;
  scrollTop: number;
  scrollIntoView: string;
  materialData: Array<{
    key: string;
    name: string;
    materials: string[];
  }>;
}

interface PageInstance {
  data: PageData;
  scrollUpdateHandler?: () => void;
  [key: string]: any;
}

const pageInstance: PageInstance = {
  data: {
    // 当前选中的分类
    currentCategory: 'single-tape' as string,
    
    // 滚动位置
    scrollTop: 0,
    scrollIntoView: '',
    
    // 材料分类数据
    materialData: [
      {
        key: 'single-tape',
        name: '单面胶带',
        materials: ['美纹纸胶带', '醋酸布胶带', '玻璃纤维胶带', '聚酰亚胺胶带', '聚酯胶带', '聚四氟乙烯胶带', '聚氯乙烯胶带', '聚丙烯胶带', '聚氨酯胶带', '硅胶胶带', '橡胶胶带', '布基胶带', '纸基胶带', '薄膜胶带', '泡沫胶带', '双面胶带', '导电胶带', '绝缘胶带', '耐高温胶带', '耐低温胶带', '防水胶带', '防静电胶带', '阻燃胶带', '透明胶带', '彩色胶带', '印刷胶带', '标识胶带', '遮蔽胶带', '保护胶带', '固定胶带']
      },
      {
        key: 'double-tape',
        name: '双面胶带',
        materials: ['无基材双面胶', 'PET双面胶', '棉纸双面胶', '泡棉双面胶', '布基双面胶', '纸基双面胶', '薄膜双面胶', '导电双面胶', '绝缘双面胶', '耐高温双面胶', '耐低温双面胶', '防水双面胶', '防静电双面胶', '阻燃双面胶', '透明双面胶', '彩色双面胶', '印刷双面胶', '标识双面胶', '遮蔽双面胶', '保护双面胶', '固定双面胶', '结构双面胶', '压敏双面胶', '热熔双面胶', 'UV固化双面胶', '环氧双面胶', '丙烯酸双面胶', '硅胶双面胶', '聚氨酯双面胶', '橡胶双面胶']
      },
      {
        key: 'protective-film',
        name: '保护膜',
        materials: ['PI保护膜', '硅胶保护膜', 'PET保护膜', 'PE保护膜', 'PP保护膜', 'PVC保护膜', 'PU保护膜', 'EVA保护膜', 'TPU保护膜', 'TPE保护膜', '导电保护膜', '绝缘保护膜', '耐高温保护膜', '耐低温保护膜', '防水保护膜', '防静电保护膜', '阻燃保护膜', '透明保护膜', '彩色保护膜', '印刷保护膜', '标识保护膜', '遮蔽保护膜', '保护保护膜', '固定保护膜', '结构保护膜', '压敏保护膜', '热熔保护膜', 'UV固化保护膜', '环氧保护膜', '丙烯酸保护膜']
      },
      {
        key: 'em-shielding',
        name: '电磁屏蔽材料',
        materials: ['异向导电膜', '单向导电膜', '导电泡棉', '导电胶条', '导电布', '导电纸', '导电塑料', '导电橡胶', '导电硅胶', '导电聚氨酯', '导电聚酯', '导电聚酰亚胺', '导电聚四氟乙烯', '导电聚氯乙烯', '导电聚丙烯', '导电聚氨酯', '导电硅胶', '导电橡胶', '导电布', '导电纸', '导电塑料', '导电橡胶', '导电硅胶', '导电聚氨酯', '导电聚酯', '导电聚酰亚胺', '导电聚四氟乙烯', '导电聚氯乙烯', '导电聚丙烯', '导电聚氨酯']
      },
      {
        key: 'absorber',
        name: '吸波材料',
        materials: ['铁氧体', '导磁片', 'OCA', '遮光胶带', '吸波泡棉', '吸波橡胶', '吸波硅胶', '吸波聚氨酯', '吸波聚酯', '吸波聚酰亚胺', '吸波聚四氟乙烯', '吸波聚氯乙烯', '吸波聚丙烯', '吸波聚氨酯', '吸波硅胶', '吸波橡胶', '吸波布', '吸波纸', '吸波塑料', '吸波橡胶', '吸波硅胶', '吸波聚氨酯', '吸波聚酯', '吸波聚酰亚胺', '吸波聚四氟乙烯', '吸波聚氯乙烯', '吸波聚丙烯', '吸波聚氨酯', '吸波硅胶', '吸波橡胶']
      },
      {
        key: 'optical',
        name: '光学材料',
        materials: ['偏光片', '反射片', '扩散片', '增亮膜', '防眩光膜', '防反射膜', '防指纹膜', '防刮膜', '防爆膜', '防蓝光膜', '防紫外线膜', '防红外线膜', '防静电膜', '导电膜', '绝缘膜', '耐高温膜', '耐低温膜', '防水膜', '防静电膜', '阻燃膜', '透明膜', '彩色膜', '印刷膜', '标识膜', '遮蔽膜', '保护膜', '固定膜', '结构膜', '压敏膜', '热熔膜']
      },
      {
        key: 'acoustic',
        name: '声学材料',
        materials: ['防水透气膜', '防水透声膜', '吸音棉', '隔音棉', '减震棉', '缓冲棉', '密封条', '密封圈', '密封垫', '密封胶', '密封膏', '密封剂', '密封液', '密封油', '密封脂', '密封蜡', '密封泥', '密封胶带', '密封胶条', '密封胶圈', '密封胶垫', '密封胶膏', '密封胶剂', '密封胶液', '密封胶油', '密封胶脂', '密封胶蜡', '密封胶泥', '密封胶带', '密封胶条']
      },
      {
        key: 'label',
        name: '标签材料',
        materials: ['压敏标签', '热敏标签', '防伪标签', 'RFID标签', 'NFC标签', '二维码标签', '条形码标签', '激光标签', '烫金标签', '烫银标签', '丝印标签', '胶印标签', '凸版标签', '凹版标签', '柔版标签', '数字标签', '喷墨标签', '激光标签', '热转印标签', '冷转印标签', '水转印标签', '气转印标签', '电转印标签', '磁转印标签', '光转印标签', '声转印标签', '热转印标签', '冷转印标签', '水转印标签', '气转印标签']
      },
      {
        key: 'thermal',
        name: '热界面材料',
        materials: ['导热垫片', '导热石墨', '导热泡棉', '导热硅胶', '导热橡胶', '导热聚氨酯', '导热聚酯', '导热聚酰亚胺', '导热聚四氟乙烯', '导热聚氯乙烯', '导热聚丙烯', '导热聚氨酯', '导热硅胶', '导热橡胶', '导热布', '导热纸', '导热塑料', '导热橡胶', '导热硅胶', '导热聚氨酯', '导热聚酯', '导热聚酰亚胺', '导热聚四氟乙烯', '导热聚氯乙烯', '导热聚丙烯', '导热聚氨酯', '导热硅胶', '导热橡胶', '导热布', '导热纸']
      },
      {
        key: 'film',
        name: '薄膜',
        materials: ['PI薄膜', 'PET薄膜', 'PC薄膜', '铝箔', '铜箔', '不锈钢箔', '钛箔', '镍箔', '锌箔', '锡箔', '铅箔', '银箔', '金箔', '铂箔', '钯箔', '铑箔', '铱箔', '钌箔', '锇箔', '铼箔', '钨箔', '钼箔', '钽箔', '铌箔', '钒箔', '铬箔', '锰箔', '铁箔', '钴箔', '镍箔']
      },
      {
        key: 'foam',
        name: '泡棉',
        materials: ['PU泡棉', 'PE泡棉', 'EVA泡棉', 'PVC泡棉', 'PP泡棉', 'PS泡棉', 'ABS泡棉', 'PC泡棉', 'PMMA泡棉', 'PET泡棉', 'PI泡棉', 'PTFE泡棉', 'PFA泡棉', 'FEP泡棉', 'ETFE泡棉', 'ECTFE泡棉', 'PVDF泡棉', 'PCTFE泡棉', 'PEEK泡棉', 'PEI泡棉', 'PPS泡棉', 'PES泡棉', 'PSU泡棉', 'PAS泡棉', 'PAR泡棉', 'PBT泡棉', 'PETG泡棉', 'CPET泡棉', 'APET泡棉', 'PETG泡棉']
      },
      {
        key: 'auxiliary',
        name: '模切辅料',
        materials: ['离型纸', '离型膜', '菲林膜', '保护膜', '遮蔽膜', '标识膜', '印刷膜', '彩色膜', '透明膜', '阻燃膜', '防静电膜', '防水膜', '耐高温膜', '耐低温膜', '绝缘膜', '导电膜', '结构膜', '压敏膜', '热熔膜', 'UV固化膜', '环氧膜', '丙烯酸膜', '硅胶膜', '聚氨酯膜', '橡胶膜', '布基膜', '纸基膜', '薄膜膜', '泡沫膜', '双面膜']
      },
      {
        key: 'adhesive-tape',
        name: '皮胶带',
        materials: ['舒力克（3M）', '国产', '进口', '合资', '独资', '民营', '国营', '外资', '内资', '合资', '独资', '民营', '国营', '外资', '内资', '合资', '独资', '民营', '国营', '外资', '内资', '合资', '独资', '民营', '国营', '外资', '内资', '合资', '独资', '民营']
      },
      {
        key: 'insulation-paper',
        name: '绝缘纸',
        materials: ['进口', '国产', '合资', '独资', '民营', '国营', '外资', '内资', '合资', '独资', '民营', '国营', '外资', '内资', '合资', '独资', '民营', '国营', '外资', '内资', '合资', '独资', '民营', '国营', '外资', '内资', '合资', '独资', '民营', '国营']
      }
    ]
  },

  onLoad(options: any) {
    console.log('散料首页页面加载完成');
    
    // 检查URL参数，确定初始分类
    if (options.category) {
      this.setData({
        currentCategory: options.category
      });
    }
    
    // 初始化滚动监听
    this.initScrollListener();
  },

  onShow() {
    console.log('散料首页页面显示');
  },

  onReady() {
    console.log('散料首页页面渲染完成');
  },

  onHide() {
    console.log('散料首页页面隐藏');
  },

  onUnload() {
    console.log('散料首页页面卸载');
  },

  // 返回上一页
  goBack() {
    wx.navigateBack();
  },

  // 打开搜索
  openSearch() {
    goToPage('/pages/search-results/search-results', { type: 'materials' });
  },

  // 切换分类
  switchCategory(e: any) {
    const category = e.currentTarget.dataset.category;
    console.log('切换分类:', category);
    
    this.setData({
      currentCategory: category
    });
    
    // 滚动到对应分类区域
    this.scrollToCategory(category);
  },

  // 滚动事件处理
  onScroll() {
    if (this.scrollUpdateHandler) {
      this.scrollUpdateHandler();
    }
  },


  // 初始化滚动监听
  initScrollListener() {
    // 使用更精确的滚动监听，参考HTML原型的实现
    this.observeScroll();
  },

  // 观察滚动位置，更新左侧选中状态
  observeScroll() {
    const updateActiveCategory = () => {
      // 使用节流，避免频繁计算
      if (this.scrollTimer) {
        clearTimeout(this.scrollTimer);
      }
      
      this.scrollTimer = setTimeout(() => {
        const query = wx.createSelectorQuery();
        query.select('#materialsContent').boundingClientRect();
        query.exec((res) => {
          if (res[0]) {
            const scrollTop = res[0].scrollTop;
            const containerHeight = res[0].height;
            
            // 检查每个分类区域的位置
            const categoryQueries = this.data.materialData.map((item: any) => {
              return new Promise((resolve) => {
                const categoryQuery = wx.createSelectorQuery();
                categoryQuery.select(`#category-${item.key}`).boundingClientRect();
                categoryQuery.exec((categoryRes) => {
                  if (categoryRes[0]) {
                    const categoryTop = categoryRes[0].top;
                    const categoryHeight = categoryRes[0].height;
                    
                    // 判断分类是否在可视区域内
                    const isVisible = categoryTop <= containerHeight / 2 && categoryTop + categoryHeight > containerHeight / 2;
                    resolve({
                      key: item.key,
                      isVisible: isVisible,
                      top: categoryTop
                    });
                  } else {
                    resolve({
                      key: item.key,
                      isVisible: false,
                      top: 0
                    });
                  }
                });
              });
            });
            
            Promise.all(categoryQueries).then((results: any[]) => {
              // 找到第一个可见的分类
              const visibleCategory = results.find(result => result.isVisible);
              if (visibleCategory && visibleCategory.key !== this.data.currentCategory) {
                this.setData({
                  currentCategory: visibleCategory.key
                });
              }
            });
          }
        });
      }, 50); // 50ms节流
    };
    
    // 绑定滚动事件
    this.scrollUpdateHandler = updateActiveCategory;
  },

  // 滚动到指定分类
  scrollToCategory(category: string) {
    console.log('滚动到分类:', category);
    
    this.setData({
      scrollIntoView: `category-${category}`
    });
    
    // 清除scrollIntoView，避免重复滚动
    setTimeout(() => {
      this.setData({
        scrollIntoView: ''
      });
    }, 500);
  },

  // 查看材料详情
  viewMaterial(e: any) {
    const materialName = e.currentTarget.dataset.name;
    console.log('查看材料详情:', materialName);
    
    // 跳转到散料详情页面
    goToPage('/pages/bulk-material-detail/bulk-material-detail', { category: materialName });
  },

  // 跳转到广告页面
  goToAd() {
    // 跳转到咨询页面
    goToPage('/pages/consultation/consultation', { type: 'bulk' });
  }
};

Page(pageInstance);
